import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { Line, DoubleLine } from '@/components/Charts';
import PanelTitle from '@/components/PanelTitle';
import styles from './index.less';

@connect(({ commonModel }) => ({ commonModel }))
class LineDemo extends Component {
  componentDidMount() {
    this.fetch();
  }

  fetch = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'commonModel/query',
      targetKey: 'lineData',
      payload: {},
    });
  };

  render() {
    const {
      commonModel: {
        lineData: { singleLineData, groupLineData, doubleLineCustomData, complexLineData } = {},
      },
    } = this.props;
    return (
      <Row className={styles.chartRow}>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="单条线" />
            <Line
              height={200}
              data={singleLineData}
              showYUnit
              unit="%"
              onChartClick={param => console.log(param)}
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="多条线" />
            <Line height={200} data={groupLineData} groupField="name" unit="万元" />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartDarkPanel}>
            <PanelTitle title="多条线-dark" fontColor="#1f9dff" />
            <Line
              height={200}
              data={groupLineData}
              groupField="name"
              unit="万元"
              chartUnitPosition
              theme="dark"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="双轴-字段展开" />
            <DoubleLine
              height={200}
              data={doubleLineCustomData}
              groupField="group"
              fieldExpand={[
                { field: 'subCost', rename: '次均住院费用' },
                { field: 'increase', rename: '费用增幅' },
              ]}
              yLeftParams={{
                unit: '元',
              }}
              yRightParams={{
                hasMinusData: true,
                unit: '%',
                showYUnit: true,
              }}
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartDarkPanel}>
            <PanelTitle title="双轴-字段展开-dark" fontColor="#1f9dff" />
            <DoubleLine
              height={200}
              data={doubleLineCustomData}
              groupField="group"
              fieldExpand={[
                { field: 'subCost', rename: '次均住院费用' },
                { field: 'increase', rename: '费用增幅' },
              ]}
              yLeftParams={{
                unit: '元',
              }}
              yRightParams={{
                hasMinusData: true,
                unit: '%',
                showYUnit: true,
              }}
              theme="dark"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <PanelTitle title="双轴-字段展开" />
            <DoubleLine
              height={200}
              data={complexLineData}
              groupField="group"
              fieldExpand={[
                { field: 'actualData', rename: '实际值', fieldKey: 'yLeft' },
                { field: 'forecastData', rename: '预测值', fieldKey: 'yLeft' },
                { field: 'errorRate', rename: '误差率', fieldKey: 'yRight' },
              ]}
              yLeftParams={{
                unit: '万元',
              }}
              yRightParams={{
                hasMinusData: true,
                unit: '%',
                showYUnit: true,
                lineType: 'dashed',
              }}
              chartUnitPosition
            />
          </div>
        </Col>
      </Row>
    );
  }
}

export default LineDemo;
